<template>
    <div class="business-promotion">
        <div class="head-box">
            <div class="head-title">活动中心 / 商业促销</div>
        </div>
        <div class="list-box comm-list" v-infinite-scroll="loadFun">
            <div class="list-row" v-for="item in data_list" :key="item.id">
                <div class="img-box">
                    <img :src="item.img ? item.img : img_buf" />
                </div>
                <div class="tag-box">{{ item.tag_ls[1] }}</div>
                <div class="activity-box">
                    <div class="activity-title">
                        <span class="title">{{ item.title }}</span>
                        <span class="tag">{{ item.tag_ls[0] }}</span>
                    </div>
                    <div class="add-but">
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            circle
                            @click="addAcitivity(item)"
                        ></el-button>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="70%"
            center
            top="5vh"
            class="establish-dialog"
            :before-close="handleCloseAll"
        >
            <div class="activity-establish">
                <div class="preview-box">
                    <div class="iframe-box">
                       <!-- <iframe
                            src=""
                            scrolling="auto"
                            frameborder="1"
                        ></iframe> -->
						<img :src="tool_obj.samp_info.img_b? tool_obj.samp_info.img_b:img_buf"/>
                    </div>

                    <div class="phone-preview">
                        <!-- <el-popover placement="top" width="100" trigger="click">
                            <div class="qr-code">
                                <div class="img-box">
                                    <vue-qr :text="qr_url" :size="150"></vue-qr>
                                </div>
                                <div class="tis-txt">关注公众号体验活动</div>
                            </div>
                        </el-popover> -->
                        <span slot="reference">手机预览</span>
                    </div>
                </div>
                <div class="explain-box">
                    <div class="explain-title">
                        {{ tool_obj.title }}
                    </div>
                    <div class="explain-doc">
                        <div class="doc-title">活动简介</div>
                        <div class="doc-txt">
                            {{ tool_obj.samp_info.desc_s }}
                        </div>
                    </div>
                    <div class="case-box">
                        <div class="case-title">参考案例</div>
                        <div class="img-box" @click="seeCaseFun">
                            <img :src="tool_obj.samp_info.img? tool_obj.samp_info.img: img_buf"/>
                        </div>
                    </div>
                    <div class="port-box" v-if="tool_obj.can_app">
                        <div class="port-title">支持访问端口</div>
                        <div class="port-txt">
                            <span
                                v-for="(item, index) in tool_obj.can_app"
                                :key="index"
                                >{{ item }}</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="createnowFun"
                    >立即创建</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="casedialogVisible"
            width="500px"
            center
            top="5vh"
            :before-close="handleClose"
            :close-on-click-modal="false"
        >
            <div class="case-info-box">
                <div class="case-title">
                    案例: {{ tool_obj.samp_info.title }}
                </div>
                <div class="tag-box">
                    <span
                        class="tag-row"
                        v-for="(item, index) in tool_obj.samp_info.tag"
                        :key="index"
                        >{{ item }}</span
                    >
                </div>

                <div class="cat-box">
                    <div class="cat-concent">
                        {{ tool_obj.samp_info.btype }}
                    </div>
                    <div class="cat-concent">{{ tool_obj.samp_info.ch }}</div>
                </div>
                <div class="data-num-box">
                    <div class="data-num-title">活动数据</div>
                    <div class="data-num" v-html="tool_obj.desc_s"></div>
                </div>
                <div class="qr-box">
                    <img
                        :src="
                            tool_obj.samp_info.qrcode
                                ? tool_obj.samp_info.qrcode
                                : img_buf
                        "
                    />
                </div>
            </div>
        </el-dialog>
        <ydDialog ref="ydDialog" @handleClose="handleClose"></ydDialog>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import ydDialog from "@/components/interactive/ydDialog";
import config from "@/js/conf/Config.js";
import vueQr from "vue-qr";
export default {
    props: [],
    components: { ydDialog, vueQr },
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false, //创建活动
            casedialogVisible: false, //案例
            cat_id: "",
            form: {
                pfrom: 0,
                pnum: 20,
            },
            is_soll: false,
            data_list: [],
            tool_obj: {
                samp_info: {},
            },
            idyun: "",
            qr_url: "https://www.baidu.com",
        };
    },
    created() {
        this.gettoolList();
    },
    mounted() {
        this.cat_id = this.$geturl().cat_id;
    },
    methods: {
        // 选择创建的活动
        addAcitivity(item) {
            // this.qr_url += item.id;
            this.dialogVisible = true;
            this.tool_obj = item;
        },
        // 关闭所有弹框
        handleCloseAll() {
            this.dialogVisible = false;
            this.casedialogVisible = false;
            this.$refs.ydDialog.yddialogVisible = false;
        },
        // 回到创建活动弹框
        handleClose() {
            this.dialogVisible = true;
        },
        // 查看案例
        seeCaseFun() {
            this.dialogVisible = false;
            this.$refs.ydDialog.yddialogVisible = false;
            setTimeout(() => {
                this.casedialogVisible = true;
            }, 200);
        },
        async getYdlistFun() {},
        // 立即创建
        async createnowFun() {
            this.dialogVisible = false;
            this.casedialogVisible = false;
            // 获取云店列表
            let url = config.YUN_SHOP_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.yun_list = res.data;
                if (res.data.length == 1) {
                    uni.navigateTo({
                        url: `/pages/interactiveActivity/create-activity?page_tab=1&cat_id=${this.cat_id}&hd_type=${this.tool_obj.type}&tool_id=${this.tool_obj.id}&idyun=${res.data[0].id}`,
                    });
                } else {
                    let data = {
                        ls: res.data,
                        cat_id: this.cat_id,
                        hd_type: this.tool_obj.type,
                        tool_id: this.tool_obj.id,
                    };
                    setTimeout(() => {
                        this.$refs.ydDialog.initData(data);
                    }, 200);
                }
            }
            // 判断是否有多个云店
        },
        loadFun() {
            if (this.is_soll) return;
            this.form.pfrom += 20;
            this.gettoolList();
        },
        // 获取工具列表
        async gettoolList() {
            this.is_soll = true;
            let url = config.DH_TOOL_LS;
            let param = this.form;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.data_list = this.data_list.concat(res.data.ls);
                setTimeout(() => {
                    this.is_soll = false;
                }, 200);
            } else {
                this.is_soll = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.qr-code {
    .img-box {
        width: 150px;
        height: 150px;
    }
    .tis-txt {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
    }
}
.business-promotion {
    background: #f2f2f2;
    height: 100%;
    .head-box {
        background: #fff;
        padding: 10px;
        .head-title {
            font-size: 18px;
        }
    }

    .list-box {
        height: calc(100% - 72px);
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        border-bottom: 1px solid #000;
        .list-row {
            width: 300px;
            height: 230px;
            border-radius: 5px;
            overflow: hidden;
            background: #fff;
            border: 1px #d7d7d7 solid;
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
            .img-box {
                width: 100%;
                height: 170px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .tag-box {
                position: absolute;
                right: 0;
                top: 20px;
                color: #fff;
                background: #f39931;
                border-radius: 20px 0 0 20px;
                padding: 3px 15px;
            }
            .activity-box {
                font-size: 14px;
                border-top: 1px #d7d7d7 solid;
                height: calc(100% - 170px);
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .activity-title {
                    .title {
                    }
                    .tag {
                        margin-left: 10px;
                        border-radius: 20px;
                        border: 1px solid #d7d7d7;
                        padding: 3px 10px;
                        color: #999;
                        font-size: 12px;
                        padding-top: 2px;
                    }
                }
            }
            ::v-deep.add-but {
                i {
                    font-weight: bold;
                }
            }
        }
    }
    ::v-deep.dialog-footer {
        .el-button {
            padding: 12px 100px;
            border-radius: 20px;
        }
    }
    ::v-deep .establish-dialog {
        .el-dialog__body {
            padding-bottom: 0;
        }
    }

    .activity-establish {
        display: flex;
        .preview-box {
            margin-right: 30px;
            .iframe-box {
                width: 375px;
                height: 667px;
                border-radius: 5px;
                border: 1px solid #d7d7d7;
				overflow: hidden;
                // iframe {
                //     width: 100%;
                //     height: 100%;
                //     border: none;
                // }
				img
				{
					width: 100%;
					height: 100%;
					border: none;
				}
            }

            .phone-preview {
                text-align: center;
                span {
                    // cursor: pointer;
                }
            }
        }
        .explain-box {
            .explain-title {
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 50px;
            }
            .explain-doc {
                border-bottom: 1px solid #000;
                padding-bottom: 10px;
                margin-bottom: 10px;
                .doc-title {
                    font-size: 18px;
                    font-weight: bold;
                }
                .doc-txt {
                    color: #aaa;
                }
            }
            .case-box {
                margin-bottom: 10px;
                .case-title {
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .img-box {
                    width: 100px;
                    height: 120px;
                    border-radius: 5px;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
            .port-box {
                .port-title {
                    font-size: 16px;
                }
                .port-txt {
                    margin-top: 5px;
                    span {
                        padding: 3px 10px;
                        font-size: 14px;
                        border-radius: 20px;
                        border: 1px solid #d7d7d7;
                    }
                }
            }
        }
    }
    .case-info-box {
        .case-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .tag-box {
            .tag-row {
                border-radius: 20px;
                border: 1px solid #d7d7d7;
                padding: 2px 10px;
                margin-right: 10px;
            }
        }
        .cat-box {
            font-size: 16px;

            margin-top: 20px;
            .cat-concent {
            }
        }
        .data-num-box {
            margin-top: 20px;

            .data-num-title {
                font-size: 16px;
            }
            .data-num {
                font-size: 14px;
            }
        }
        .qr-box {
            margin-top: 20px;
            border-radius: 5px;
            border: 1px solid #d7d7d7;
            padding: 10px;
            width: 180px;
            height: 180px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
